<template>
	<view class="my-shop" :style="{ '--color': vuex_config.themeColor1 }">
		<view class="u-flex top_head">
			<block v-if="userData.pk_id ? true : false">
				<image :src="userData.headimgurl" class="user-image"></image>
				<view class="user-name">
					<view class="name u-line-1">
						{{ userData.store_name ? userData.store_name : `${userData.nickname}的小店` }}
					</view>
					<template v-if="!shopUserId || (vuex_user.pk_id && shopUserId === vuex_user.pk_id)">
						<view class="share_box" @click="showCanvas" v-if="userData.store_status == 1">
							小店二维码
							<text class="iconfont iconfont-e620"></text>
						</view>
					</template>
				</view>
			</block>
		</view>
		<view class="shop-bottom">
			<slot name="shop-bottom"></slot>
		</view>
		<canvas style="width: 375px; position: absolute; left: 750rpx; height: 2500rpx;  opacity: 0;"
			canvas-id="codecanvas" />
		<u-popup v-model="showType" mode="center" width="70%">
			<!-- #ifndef MP-ALIPAY || APP-PLUS -->
			<image class="qr_img" :src="posterUrl" mode="widthFix" show-menu-by-longpress></image>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY || APP-PLUS -->
			<image class="qr_img" :src="posterUrl" mode="widthFix"></image>
			<!-- #endif -->
		</u-popup>
	</view>
</template>

<script>
	import {
		uniGetImageInfo
	} from '@/utils/uniPromise';
	export default {
		props: {
			shopUserId: {
				type: Number,
				default: 0
			}, // 没有值，表示是小店商品列表页
		},
		data() {
			return {
				userData: {},
				init: false,
				posterUrl: '',
				showType: false,
				qrObj: {}
			};
		},
		mounted() {
			if (!this.shopUserId) {
				this.$loading()
			}
			this.initUser();
		},
		methods: {
			$show() {
				if (this.init) {
					this.initUser();
				} else {
					this.init = true;
				}
			},
			initUser() {
				let userId = this.shopUserId || this.vuex_user.pk_id;
				this.$resPost('GetUsersInfo', {
					users_id: userId
				}).then(({
					data
				}) => {
					this.userData = {
						...data
					}
					this.$emit('changeUserData', data);
					if (this.vuex_user.pk_id && (this.vuex_user.pk_id == this.shopUserId || !this.shopUserId)) {
						this.$u.vuex('vuex_user', data);
						this.$u.vuex('vuex_token', data.pk_id);
					}
					if (!this.shopUserId) {
						this.$hide()
					}
				});
			},
			getImg() {
				return new Promise((resolve, reject) => {
					if (this.qrObj.path) {
						resolve()
						return
					}
					let path = `package/user/my-shop/go-shop/index?pk_id=${this.vuex_user.pk_id}`
					if (this.vuex_user.type == '2' || this.vuex_user.type == '4') {
						path += `&superior=${this.vuex_user.pk_id}`
					}
					this.$resPost('SmallProgramQRCode', {
						url: path,
						type: 99,
						appid: this.vuex_business.appid,
					}).then(({
						data
					}) => {
						let posterUrl = `${this.vuex_businessObj.resquest}${data.url}`;
						uniGetImageInfo(posterUrl).then(res => {
							this.qrObj = {...res}
							resolve()
						});
					})
				})
			},
			showCanvas() {
				this.$loading()
				this.getImg().then(() => {
					let that = this
					// #ifdef MP-ALIPAY
					const ctx = my.createCanvasContext('codecanvas', this);
					// #endif

					// #ifdef MP-BAIDU
					const ctx = swan.createCanvasContext('codecanvas', this);
					// #endif

					// #ifndef MP-ALIPAY || MP-BAIDU
					const ctx = uni.createCanvasContext('codecanvas', this);
					// #endif
					ctx.setFillStyle('#ffffff');
					ctx.fillRect(0, 0, 375, 1200);
					let allheight = 10;
					ctx.drawImage(this.qrObj.path, 10, allheight, 355, 355)
					
					ctx.setFontSize(20);
					ctx.setTextAlign('center')
					ctx.setFillStyle('#000');
					allheight += 380
					ctx.fillText(this.userData.store_name || (`${this.userData.nickname}的小店`), 187.5, allheight);
					allheight += 15

					ctx.save(); //保存
					ctx.draw(false, () => {
						// #ifndef MP-ALIPAY
						uni.canvasToTempFilePath({
								quality: 1,
								height: allheight,
								canvasId: 'codecanvas',
								success: function(res) {
									// 在H5平台下，tempFilePath 为 base64
									that.posterUrl = res.tempFilePath;
									that.showType = true
									that.$hide()
								},
								fail: err => {
									that.$hide()
								}
							},
							this
						);
						//  #endif 

						// #ifdef MP-ALIPAY
						// 支付宝只适应png跟jpg图 其他图会出问题
						ctx.toTempFilePath({
								quality: 1,
								height: allheight,
								success: function(res) {
									that.posterUrl = res.apFilePath
									that.showType = true
									that.$hide()
								},
								fail: err => {
									that.$hide()
								}
							},

						);
						//  #endif 

					}); //绘制
				}).catch(() => {
					this.$hide()
				})


			},
		}
	};
</script>

<style lang="scss" scoped>
	.top_head {
		background-color: var(--color);
		padding: 98rpx 26rpx 118rpx;

		.user-image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 30rpx;
			align-items: center;
		}

		.user-name {
			flex: 1;
			overflow: hidden;
			color: #fff;

			.name {
				font-size: 30rpx;
				font-weight: bold;
			}

			.share_box {
				.iconfont {
					margin-left: 8rpx;
					display: inline;

					&::before {
						display: inline;
					}
				}
			}
		}
	}

	.shop-bottom {
		margin-top: -20rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		background-color: #fff;
		padding-top: 20rpx;
	}
</style>
